<template>
	<div class="order">
		<custom-header-bar title="确认订单" backStatus="1" bg="1"></custom-header-bar>
		<div class="content">
			<div class="address" @click="jumpaddress" v-if="userby.name">
				<image src="/static/point.png" class="point" alt="" />
				<div style="flex: 1;">
					<div class="info">
						<div class="name">{{ userby.name }}</div>
						<div class="phone">{{ userby.userMobile }}</div>
					</div>
					<div class="address-info">
						{{ userby.addressOneStr||'' }}{{ userby.addressTwoStr||''}}{{ userby.addressThreeStr||'' }}{{ userby.addressFourStr||'' }}
						{{ userby.addressDetail||'' }}
					</div>
				</div>
				<image src="/static/icon-next-gray.png" class="set-icon" alt="" />
			</div>
			<div class="address" @click="jumpaddress" v-else>
				<image src="/static/point.png" class="point" alt="" />
				<div style="flex: 1;">
					<div class="info">
						<div class="name">请选择地址</div>
					</div>
				</div>
				<image src="/static/icon-next-gray.png" class="set-icon" alt="" />
			</div>
			<div class="user-info" v-if="Housedetkeep.name">
				<div class="avatar">
					<img :src="Housedetkeep.iconUrl" alt="" />
				</div>
				<div class="info">
					<div class="name">
						<span>{{ Housedetkeep.name }}</span>
						<span>{{ Housedetkeep.addressOneStr}}{{ Housedetkeep.addressTwoStr }}</span>
					</div>
					<div class="skill">
						<span v-if="Housedetkeep.yearNum">{{ Housedetkeep.yearNum }}年</span>
						<span v-if="Housedetkeep.contents">{{Housedetkeep.contents}}</span>
						<span v-if="Housedetkeep.age">{{ Housedetkeep.age }}岁</span>
					</div>
					<div class="price">
						<span>￥</span>{{ Housedetkeep.serveMoney}}{{ Housedetkeep.serveMoneyStr }}
					</div>
				</div>
			</div>
			<div class="subscribe">
				<image src="/static/time.png" class="time-icon" alt="" />
				<div class="time">
					<div>预约时间：<span>{{ daysss }}</span></div>
					<div style="display: flex;flex-wrap: wrap;"><span style="word-break: keep-all;white-space: nowrap"
							v-for="(item,index) in shiduansss" :key="index">{{item}}, </span></div>
				</div>
			</div>
			<div class="remarks">
				<div class="remarks-title">备注</div>
				<div class="remarks-text">费用结算请线下完成</div>
				<div class="remarks-text">
					预约服务超时未到岗服务的请及时联系客服人员
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="price">
				本次支付：
				<span class="symbol">￥</span>
				<span class="money">0.00</span>
			</div>
			<button class="submit-btn" @click="getsure">提交预约单</button>
		</div>
		<u-popup :overlayOpacity="0.6" :round="10" mode="center" :show="showOut">
			<div class="out-popup-box">
				<div class="tips-title flex align-center">
					<image src="/static/icon-success.png" class="warning-icon" alt="" />
				</div>
				<div class="tips-text">预约成功</div>
				<div class="tips-bototm flex align-center justify">
					<button class="tips-cancle" @click="handleClickBack">返回首页</button>
					<button class="tips-confirm" @click="handleClickDetail">
						订单详情
					</button>
				</div>
			</div>
		</u-popup>
	</div>
</template>
<script>
	import {
		Getlistdet,
		getbyuser,
		getsureorder
	} from "@/api/housekeeping";
	import {
		PICTURE_URL
	} from "../../../utils/config.js";
	import CustomHeaderBar from "@/components/custom-header-bar.vue";
	import dayjs from "dayjs";
	export default {
		data() {
			return {
				imgurl: PICTURE_URL,
				daysss: "", // 日期
				shiduansss: [], // 时段
				keepid: "", // 家政id
				yuyueTimeShow: false,
				Housedetkeep: {},
				now: "",
				days: "",
				userby: {},
				showOut: false,
				detailId: "",
				selectList: [],
				defaultList: []
			};
		},
		components: {
			CustomHeaderBar,
		},
		onLoad: function(option) {
			this.daysss = option.daysss;
			this.days = option.daysss
			this.shiduansss = option.shiduansss.split(',');
			this.keepid = option.id;
			if (this.keepid || this.keepid != "" || this.keepid != null) {
				this.getlistdet();
			}
			this.getbyuser();
		},
		onShow() {
			let address = uni.getStorageSync('AddressOnce')
			if (address) {
				this.userby = {
					...this.userby,
					...address,
				}
				uni.removeStorageSync('AddressOnce')
			}
		},
		methods: {
			handleClickBack() {
				uni.switchTab({
					url: "/pages/index/index",
				});
			},
			handleClickDetail() {
				uni.redirectTo({
					url: "/pages/my/order/detail?id=" + this.detailId,
				});
			},
			// 详情
			getlistdet() {
				Getlistdet(this.keepid).then((res) => {
					// console.log(res)
					if (res.data.code == 200) {
						this.Housedetkeep = res.data.data;
						this.defaultList = JSON.parse(JSON.stringify(TimeList))
					}
				});
			},
			// 用户地址详情
			getbyuser() {
				getbyuser().then((res) => {
					console.log(res);
					if (res.data.code == 200) {
						if (res.data.data.length == 0) {
							this.userby = {};
						} else {
							this.userby = res.data.data[0];
						}
					}
				});
			},
			// 提交
			getsure() {
				if (this.shiduansss.length === 0) {
					uni.$u.toast("请选择时间段");
					return;
				}
				if (!this.userby.addressOneStr) {
					uni.$u.toast("请选择服务地址");
					return;
				}
				console.log(123)
				let parse = {
					subUserName: this.userby.name,
					subPhone: this.userby.mobile,
					addressList: [
						this.userby.addressOneId,
						this.userby.addressTwoId,
						this.userby.addressThreeId,
						this.userby.addressFourId,
					],
					subAddressStr: this.userby.addressOneStr +
						this.userby.addressTwoStr +
						this.userby.addressThreeStr +
						this.userby.addressFourStr,
					addressDetail: this.userby.addressDetail,
					subAddressId: this.userby.id,
					laborerName: this.Housedetkeep.name,
					subDate: this.daysss,
					subTime: this.shiduansss.join(','),
					laborerId: this.keepid,
					userId: this.userby.userMobile,
				};
				getsureorder(parse).then((res) => {
					if (res.data.code == 200) {
						this.detailId = res.data.msg;
						this.showOut = true;
					} else {
						uni.$u.toast(res.data.msg);
					}
				});
			},
			// 选择地址
			jumpaddress() {
				uni.navigateTo({
					url: "/pages/address/addressManage?type=order"
				});
			}
		},
	};
</script>
<style lang="scss" scoped>
	.order {
		height: 100vh;
		padding-top: 160upx;
		background-color: #f4f4f4;
		box-sizing: border-box;
		position: relative;

		.content {
			padding: 24upx;

			.set-icon {
				width: 40upx;
				height: 40upx;
				align-self: center;
			}

			.address {
				background: #ffffff;
				border-radius: 30upx;
				padding: 50upx 40upx;
				display: flex;

				.info {
					display: flex;
					align-items: center;
				}

				.point {
					width: 46upx;
					height: 46upx;
					margin-right: 20upx;
				}

				.name {
					font-size: 32upx;
					color: #000;
				}

				.phone {
					font-size: 28upx;
					color: rgba(0, 0, 0, 0.45);
					margin-left: 20upx;
				}

				.address-info {
					color: #484848;
					margin-top: 18upx;
				}
			}

			.user-info {
				padding: 32upx;
				border-radius: 30upx;
				background-color: #fff;
				margin-top: 24upx;
				display: flex;

				.avatar {
					flex: 0 0 140upx;
					width: 140upx;
					height: 180upx;
					border-radius: 10upx;
					overflow: hidden;
					margin-right: 28upx;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					position: relative;
				}

				.name {
					font-size: 32upx;
					color: #484848;

					:first-child {
						margin-right: 15upx;
					}
				}

				.skill {
					color: rgba(0, 0, 0, 0.65);
					margin-top: 10upx;
					font-size: 28upx;

					span {
						padding-right: 20upx;
						border-right: 2upx solid #d1d1d6;
						margin-right: 20upx;
					}

					:last-child {
						border: none;
						margin: 0;
					}
				}

				.price {
					color: #dc3338;
					font-size: 36upx;

					span {
						font-size: 28upx;
					}
				}
			}

			.subscribe {
				background-color: #fff;
				border-radius: 30upx;
				display: flex;
				align-items: center;
				padding: 32upx;
				margin-top: 24upx;

				.time-icon {
					width: 42upx;
					height: 42upx;
					margin-right: 22upx;
				}

				.time {
					font-size: 28upx;
					color: rgba(0, 0, 0, 0.65);
					flex: 1;

					span {
						color: #dc3338;
					}
				}
			}

			.remarks {
				margin-top: 24upx;
				border-radius: 30upx;
				background-color: #fff;
				padding: 30upx;
				font-size: 26upx;

				.remarks-title {
					color: #61d7ca;
				}

				.remarks-text {
					color: #999999;
					margin-top: 18upx;
				}
			}
		}

		.bottom {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			padding-left: 35upx;
			height: 130upx;
			background-color: #f8f8f8;
			display: flex;
			align-items: center;
			border-top: 1px solid #e9e9e9;

			.price {
				font-size: 34upx;

				span {
					color: #dc3338;
					font-size: 28upx;
				}

				.money {
					font-size: 38upx;
				}
			}

			.submit-btn {
				width: 337upx;
				height: 80upx;
				background: #61d7ca;
				color: #fff;
				font-size: 34upx;
				text-align: center;
				margin-left: 75upx;
			}
		}
	}

	.active {
		color: #33ccacff;
	}

	.activesss {
		margin: 6upx;
		width: 158upx;
		height: 80upx;
		line-height: 76upx;
		border-radius: 10upx;
		border: 2upx solid #f4f4f4;
		box-sizing: border-box;
		border: 1px solid #33ccac;
		background-color: #ffffff;
		font-size: 28upx;
		background: #61d7ca;
		color: #ffffff;
	}

	.out-popup-box {
		width: 416upx;
		padding-top: 65upx;
		padding-bottom: 50upx;
		box-sizing: border-box;
	}

	.tips-title {
		text-align: center;

		span {
			font-size: 34upx;
			color: rgba(0, 0, 0, 0.8);
			margin-left: 20upx;
		}

		.warning-icon {
			width: 70upx;
			height: 70upx;
		}
	}

	.tips-text {
		font-size: 32upx;
		color: #000;
		margin-top: 20upx;
		text-align: center;
	}

	.tips-cancle {
		width: 160upx;
		height: 60upx;
		line-height: 60upx;
		background: #ebedf0;
		color: #bfbebe;
		font-size: 26upx;
		margin-right: 16upx;
	}

	.tips-confirm {
		width: 160upx;
		height: 60upx;
		line-height: 60upx;
		background: #61d7ca;
		color: #fff;
		font-size: 26upx;
	}

	.tips-bototm {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 60upx;
	}
</style>
